<template>
	<view>
		<view class="title">
			{{titles}}
		</view>
		<view class="info">
			<text class="witter">{{info.authorWriter}}</text>
			<text class="time">{{info.gmtCreate | times}}</text>
		</view>
		<!-- <u-swiper
		                :list="urls2"
		                previousMargin="30"
		                nextMargin="30"
		                circular
		                :autoplay="false"
		                radius="5"
		                bgColor="#ffffff"
						@click="open"
		        ></u-swiper> -->
		<view class="content_big">
			<image @click="previewImageFun(item,index)" v-for="(item,index) in urls2" :src="item" mode="widthFix">
			</image>
		</view>

		<!-- <u-album style="margin: 0 5%;" :urls="urls2" :previewFullImage='true' :bigimg='0' multipleSize="200upx" singleSize='200upx'></u-album> -->
		<u-parse class="texts" :customStyle="{
				width: albumWidth + 'px'
			}" :content="content"></u-parse>



		<!-- <scroll-view style="margin-bottom: 80upx;"> -->
		<!-- 	<view style="margin-bottom: 200upx;">
			<view v-for="(item,index) in commentlist" class="lists">
				<view class="listtop">
					<view style="width: 20%;">
						<image :src='item.imageUrl' mode="" style="width: 40upx;height: 40upx;border-radius: 999rem;"></image>
					</view>
					
					<text class="names" >{{item.nickName}}</text>
				</view>
				<view class="listtop">
					<view style="width: 80%;">{{item.commentContent}}</view>
					<u-icon name="thumb-up"      v-if='item.commentHitState == 0' style="width: 10%;" color="#AAAAAA" size="28" @click="zan(item,index)"></u-icon>
					<u-icon name="thumb-up-fill" v-else style="width: 10%;" color="#FFFF00" size="28" @click="zan(item,index)"></u-icon>
					<u-icon v-if="item.userId == userid" name="trash-fill" style="width: 10%;" color="#AAAAAA" size="28" @click="del(item,index)"></u-icon>
				</view>
			</view>
		</view> -->


		<!-- 	<view class="tests" @click="opens()" v-if="show == false">
			<u-textarea disabled :fixed='true' autoHeight v-model='commentContent' placeholder="说点你的想法" border="bottom" style="width: 80%;"></u-textarea>
			<u-button text="发送" type="success" size="normal" style="width: 20%;" ></u-button>
		</view > -->
		<!-- <comment ref="comment" :getDataFn="commentGetDataFn" :idFn='fileid' @fatherMethod="commentlists"></comment> -->
		<u-modal :closeOnClickOverlay='true' :show="showdel" title="是否删除文章" :content='content' :showCancelButton='true'
			@cancel='() => showdel = false' @confirm='delfile' @close="() => showdel = false"></u-modal>

		<!-- 	<u-popup :show="show" mode="bottom" :closeOnClickOverlay='true'  @close="close" >
		       <view class="tests2">
		           <u-textarea :focus='fff' :fixed='true' autoHeight v-model='commentContent' placeholder="说点你的想法" border="bottom" style="width: 80%;"></u-textarea>
		            <u-button text="发送" type="success" size="normal" style="width: 20%;" @click="send()"></u-button>
		        </view>
		</u-popup> -->

		<u-overlay :show="showimg" @click="showimg = false">
			<!-- <view style="width: 100%;margin-top: 50%;"> -->
			<image :src="bigimgurl" mode="aspectFit" style="width: auto;height: auto;"></image>
			<!-- </view> -->

		</u-overlay>
	</view>
</template>

<script>
	let timer = null
	import {
		file,
		articledel
		// commentlist,
	} from '@/api/community'
	import {
		commentlist,
		addcomment,
		delcomment,
		zan,
		nzan,
	} from '@/api/minefile'
	export default {
		data() {
			return {
				showimg: false,
				bigimgurl: '',
				content: '是否删除当前发布的文章',
				showdel: false,
				commentlist: [],
				albumWidth: 0,
				urls2: [],
				titles: '',
				content: ``,
				circles: {
					pageSize: 10,
					pageNum: 1,
					circleId: null
				},
				commentContent: null,
				userid: null,
				msgListHeight: 0,
				screenHeight: 0,

				fff: false,
				show: false,
				show2: true,
				info: [],
			}
		},
		filters: {
			times(value) {
				let date = new Date(value);
				let y = date.getFullYear(); // 年
				let MM = date.getMonth() + 1; // 月
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate(); // 日
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours(); // 时
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes(); // 分
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds(); // 秒
				s = s < 10 ? ('0' + s) : s;
				// var timer =  y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				var timer = y + '-' + MM + '-' + d;
				return timer;
			}
		},
		onReachBottom() {
			//阻止重复加载
			if (timer !== null) {
				clearTimeout(timer)
			}
			this.circles.pageNum++;
			timer = setTimeout(() => this.circlelist(), 500)
			// this.getMoreNews()
		},
		onLoad(data) {
			this.userid = JSON.parse(uni.getStorageSync('user')).id
			console.log(data)
			this.circles.circleId = data.id;
			this.type = data.type;
			this.files();
			this.circlelist();
		},
		methods: {
			previewImageFun(src, index) {
				console.log(src)
				console.log(this.urls2)
				uni.previewImage({
					urls: this.urls2,
					current: index
					// longPressActions: {
					// 	itemList: ['发送给朋友', '保存图片', '收藏'],
					// 	success: function(data) {
					// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 	},
					// 	fail: function(err) {
					// 		console.log(err.errMsg);
					// 	}
					// }
				});
			},
			toComment() {

				this.$refs.comment.show(this.dataList[this.k].id);
			},
			delfile() {
				articledel(this.circles.circleId).then(res => {
					console.log(res.data)
					if (res.success == 1) {
						uni.showToast({
							title: '删除成功后跳转',
							icon: 'success',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateBack({
								url: 'files?id=1'
							})
						}, 2000)
					} else {
						uni.showToast({
							title: res.data,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			opens() {
				this.show = true;
				this.fff = true;
			},
			close() {
				this.fff = false;
				this.show = false;
			},
			commentGetDataFn: function() {
				return new Promise(rs => {
					let arr = []
					for (let sss in this.commentlist) {
						let likes = false;
						if (this.commentlist[sss].commentHitState == 1) {

							likes = true;
						}
						// console.log(likes,this.commentlist[sss].commentPraseCount,"显示是否点赞",sss)
						let lists = {
							"content": this.commentlist[sss].commentContent,
							"name": this.commentlist[sss].nickName,
							"likeCounts": this.commentlist[sss].commentPraseCount,
							"imageUrl": this.commentlist[sss].imageUrl,
							"id": this.commentlist[sss].id,
							"isLike": likes,
						}
						arr.push(lists)
					}
					rs({
						"pages": this.pageNum,
						"records": arr
					})
				})
			},
			send() {
				let sss = {
					circleId: this.circles.circleId,
					commentContent: this.commentContent,
				}
				addcomment(sss).then(res => {
					console.log(res.data)
					if (res.success == 1) {
						// this.urls2 = res.data.stringList;
						// this.titles = res.data.title;
						// this.content    = res.data.description;
						this.commentlist.unshift(res.data);
						uni.showToast({
							title: '评论成功',
							icon: 'success',
							duration: 2000
						});
						this.$forceUpdate();
						this.commentContent = null;
						this.fff = false;
						this.show = false;
					} else {
						uni.showToast({
							title: res.data,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			zan(item, index) {
				if (item.commentHitState == 0) {
					// 点赞
					let sss = {
						circleId: this.circles.circleId,
						commentId: item.id
					}
					zan(sss).then(res => {
						console.log(res.data, "00000000000")
						if (res.success == 1) {
							uni.showToast({
								title: '点赞成功',
								icon: 'success',
								duration: 2000
							});
							this.commentlist[index].commentHitState = 1;
						} else {
							uni.showToast({
								title: res.data,
								icon: 'none',
								duration: 2000
							});
						}
					})
				} else {
					// 取消赞
					let sss = {
						// circleId:this.circles.circleId,
						commentId: item.id,
					}
					nzan(sss).then(res => {
						console.log(res.data)
						if (res.success == 1) {
							uni.showToast({
								title: '取消成功',
								icon: 'success',
								duration: 2000
							});
							this.commentlist[index].commentHitState = 0;
						} else {
							uni.showToast({
								title: res.data,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			del(item, index) {
				let sss = {
					id: item.id,
				}
				delcomment(sss).then(res => {
					console.log(res.data)
					if (res.success == 1) {
						uni.showToast({
							title: '删除成功',
							icon: 'success',
							duration: 2000
						});
						this.commentlist.splice(index, 1);
					} else {
						uni.showToast({
							title: res.data,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			files() {
				let sss = {
					id: this.circles.circleId
				}
				file(sss).then(res => {
					if (res.success == 1) {
						console.log(res.data, "0000000000000000000")
						this.urls2 = res.data.stringList;
						this.titles = res.data.title;
						this.content = res.data.description;
						this.info = res.data;
						console.log(this.urls2)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			circlelist() {
				commentlist(this.circles).then(res => {
					if (res.data.records.length != 0) {
						for (let sss in res.data.records) {
							this.commentlist.push(res.data.records[sss])
						}
						console.log(res.data)
						// this.circles.pageNum++;
					} else {
						this.circles.pageNum--;
						// uni.showToast({
						// 	title: '无更多内容',
						// 	icon:'none',
						// 	duration: 2000
						// });
					}
				})
			},
			leftClick() {
				uni.navigateBack({})
			},
			rightClickdelshow() {
				// articledel
				this.showdel = true;
			},
			open(e) {
				// this.showimg = true;
				// this.bigimgurl = this.urls2[e];
				// console.log(e)
			}
			// rightClickdel(){
			// 	articledel
			// }
		}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	// page {
	// 	background-color: #e1e1e1 !important;
	// }
	.texts {
		width: 90%;
		margin: 0 auto;
		padding-top: 5%;
		padding-bottom: 20upx;
	}

	.tests {
		background-color: #F7F7F7;
		position: fixed !important;
		// transform: translateZ(0);
		// z-index: 100;
		// float: left;
		margin: 0 auto;
		left: 0;
		right: 0;
		width: 90%;
		bottom: 5upx;
		display: flex;
		align-items: center;
	}

	.tests2 {
		margin: 0 auto;
		left: 0;
		right: 0;
		width: 90%;
		display: flex;
	}

	.lists {
		width: 90%;
		margin: 0upx auto;
		border-top: 1upx solid #F7F7F7;
		// background-color: #F7F7F7;
	}

	.names {
		text-align: left;
		width: 80%;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.listtop {
		width: 100%;
		display: flex;
	}

	.title {
		width: 90%;
		margin: 0 auto;
		font-size: 40upx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #161616;
		opacity: 1;
		margin-bottom: 20upx;
	}

	.content_big {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.info {
		width: 90%;
		margin: 0 auto;
		color: #999999;
		font-size: 26rpx;
		margin-bottom: 30rpx;

		.witter {
			margin-right: 70rpx;
		}
	}
</style>
